<template>
  <edu-dialog
    :title.sync="dialog.title"
    :visible.sync="dialog.showDialog"
    @close="close"
    @confirm="confirm"
    width="500px"
  >
    <el-input
      placeholder="请输入内容"
      v-model="dialog.formData.roleName"
      size="small"
    >
      <template slot="append"
        ><el-button
          @click="
            () => {
              query();
            }
          "
          size="small"
          >搜索</el-button
        ></template
      >
    </el-input>

    <edu-table
      ref="unionTable"
      :data="tableList"
      :pageSize="queryParams.pageSize"
      :pageNum="queryParams.pageNum"
      :total="queryParams.total"
      @page-change="handleCurrentChange"
      :order="true"
      :selection="true"
      :pagination="false"
    >
      <el-table-column label="角色名" prop="roleName" />
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          {{ renderOption(scope.row.status, "status") }}
        </template>
      </el-table-column>
    </edu-table>
  </edu-dialog>
</template>

<script>
import { queryRoleList, updateAccountRole } from "@/api/users";
import utils from "@/utils";
import mixins from "@/mixins";

export default {
  mixins: [mixins],
  data() {
    return {
      queryParams: {
        condition: {},
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableList: [],
      accountIdList: [],
      dialog: {
        title: "关联角色",
        showDialog: false,
        formData: {
          input: "",
        },
        rules: {},
      },
      options: {
        roleIdList: "",
        status: [
          {
            name: "正常",
            code: 1,
          },
          {
            name: "禁用",
            code: 2,
          },
          {
            name: "锁定",
            code: 3,
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    open(data) {
      this.dialog.showDialog = true;

      this.accountIdList = data;
      this.query();
    },
    close() {
      this.dialog.formData = {};

      this.dialog.showDialog = false;
    },
    handleCurrentChange(page) {
      this.queryParams.pageSize = page.pageSize;
      this.queryParams.pageNum = page.pageNum;

      this.query();
    },
    async query(pageNum) {
      // 有pageNum 重置为第一页
      if (pageNum) {
        this.dialog.formData = pageNum;
      }

      let { returnObj } = await queryRoleList(this.dialog.formData);

      this.tableList = returnObj;
    },
    async confirm() {
      let selectedIds = this.$refs.unionTable
        .getCheckData()
        .map((c) => c.roleId);

      if (!selectedIds || selectedIds.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择",
        });
        return;
      }
      await updateAccountRole({
        roleIdList: selectedIds,
        accountIdList: this.accountIdList,
      });

      this.close();

      this.$message({
        type: "success",
        message: "成功",
      });

      this.$emit("done");
    },
  },
};
</script>

<style lang="scss" scoped></style>
